<template>
    <div class="outdiv">
        <div style="width: 600px;" class="register-form">
            <h2 class="login-title">客户注册</h2>
            <bk-form :label-width="200" :model="formData" :rules="rules" ref="validateForm1">
                <bk-form-item label="用户名:" :property="'username'" :required="true">
                    <bk-input v-model="formData.username" placeholder="请输入3到10个以内的字符"></bk-input>
                </bk-form-item>
                <bk-form-item label="密码:" :property="'password'" :required="true">
                    <bk-input v-model="formData.password" placeholder="请输入6到15个以内的字符" type="password"></bk-input>
                </bk-form-item>
                <bk-form-item label="确认密码:" :property="'cpassword'" :required="true">
                    <bk-input v-model="formData.cpassword" placeholder="请再次输入密码" type="password"></bk-input>
                </bk-form-item>
                <bk-form-item label="真实姓名:" :property="'realname'" :required="true">
                    <bk-input v-model="formData.realname"></bk-input>
                </bk-form-item>
                <bk-form-item label="性别" :required="true" :property="'sex'">
                    <bk-radio-group v-model="formData.sex">
                        <bk-radio :value="'男'">男</bk-radio>
                        <bk-radio :value="'女'">女</bk-radio>
                    </bk-radio-group>
                </bk-form-item>
                <bk-form-item label="地址:" :required="true" :property="'address'">
                    <bk-input v-model="formData.address"></bk-input>
                </bk-form-item>
                <bk-form-item label="手机号:" :required="true" :property="'tel'">
                    <bk-input v-model="formData.tel"></bk-input>
                </bk-form-item>
                <bk-form-item>
                    <bk-button style="margin-right: 3px;" theme="primary" title="注册" @click.stop.prevent="checkData" :loading="isChecking">注册</bk-button>
                    <bk-button ext-cls="mr5" theme="default" @click="tiaozhuan" title="去登陆">登录页面</bk-button>
                </bk-form-item>
            </bk-form>
        </div>
    </div>
</template>

<script>
    
    import { mapGetters } from 'vuex'

    import { bus } from '@/common/bus'
    export default {
        name: 'monitor-navigation',
        data () {
            return {
                formData: {
                    username: '',
                    password: '',
                    cpassword: '',
                    realname: '',
                    sex: '',
                    address: '',
                    tel: '',
                    role: ''
                },
                rules: {
                    username: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 1,
                            message: '不能小于1个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于10个字符',
                            trigger: 'blur'
                        }
                    ],
                    password: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            min: 6,
                            message: '不能小于6个字',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    cpassword: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            validator: (value) => {
                                return value === this.formData.password
                            },
                            message: '确认密码错误',
                            trigger: 'blur'
                        }
                    ],
                    realname: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            max: 10,
                            message: '不能多于15个字符',
                            trigger: 'blur'
                        }
                    ],
                    sex: [
                        {
                            required: true,
                            message: '必选项',
                            trigger: 'blur'
                        }
                    ],
                    address: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        }
                    ],
                    tel: [
                        {
                            required: true,
                            message: '必填项',
                            trigger: 'blur'
                        },
                        {
                            regex: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/,
                            message: '请输入正确手机号码',
                            trigger: 'blur'
                        }
                    ]
                }
            }
        },
        computed: {
            ...mapGetters(['mainContentLoading']),
            curHeaderNav () {
                return this.header.list[this.header.active] || {}
            }
        },
        created () {
            const platform = window.navigator.platform.toLowerCase()
            if (platform.indexOf('win') === 0) {
                this.systemCls = 'win'
            }
        },
        mounted () {
            const self = this
            bus.$on('show-login-modal', data => {
                self.$refs.bkAuth.showLoginModal(data)
            })
            bus.$on('close-login-modal', () => {
                self.$refs.bkAuth.hideLoginModal()
                setTimeout(() => {
                    window.location.reload()
                }, 0)
            })
        },
        methods: {
            register () {
                const qs = require('qs')
                this.axios({
                    url: '/register/',
                    method: 'post',
                    responseType: 'json',
                    data: qs.stringify({
                        'username': this.formData.username,
                        'password': this.formData.password,
                        'realname': this.formData.realname,
                        'sex': this.formData.sex,
                        'address': this.formData.address,
                        'tel': this.formData.tel
                    })
                }).then(res => {
                    if (res.data.result === true) {
                        const h = this.$createElement
                        this.$bkInfo({
                            type: 'success',
                            title: '注册成功',
                            showFooter: false,
                            subHeader: h('a', {
                                style: {
                                    color: '#3a84ff',
                                    textDecoration: 'none',
                                    cursor: 'pointer'
                                }
                            })
                        })
                        this.$router.push({
                            name: 'appMain'
                        })
                    } else {
                        const a = this.$bkInfo({
                            type: 'error',
                            title: '注册失败,请换个用户名',
                            subTitle: '此窗口2秒后关闭',
                            showFooter: false
                        })
                        let num = 2
                        const t = setInterval(() => {
                            a.subTitle = `此窗口${--num}秒后关闭`
                            if (num === 0) {
                                clearInterval(t)
                                a.close()
                            }
                        }, 1000)
                    }
                })
            },
            checkData () {
                this.$refs.validateForm1.validate().then(validator => {
                    this.register()
                }, validator => {
                })
            },
            tiaozhuan () {
                this.$router.push({
                    name: 'appMain'
                })
            }
        }
    }
</script>

<style>
.login-title {
    color: #303133;
    text-align: center;
}
.register-form {
    width: auto;
    margin: 40px auto; /* 上下间距160px，左右自动居中*/
    background-color: rgba(124, 180, 233, 0.8); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圆角 */
}
</style>
